<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition 
    xmlns="http://www.w3.org/1999/xhtml"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:p="http://primefaces.org/ui"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:pe="http://primefaces.org/ui/extensions"
    xmlns:c="http://java.sun.com/jsp/jstl/core">
    
<!--    columnClasses="panelGridId,panelGridId, panelGridId,panelGridId, panelGridId,panelGridId"-->
    <h:panelGrid id="displayState" styleClass="addELIT" cellpadding="0" border="0" columns="2" 
                 columnClasses="panelGridId,panelGridId">
        <p:panel>
            <h:panelGrid columns="7" border="0" cellpadding="0" cellspacing="4" >
                <p:outputLabel value="Nama Laporan" for="fstateName" /><h:outputLabel value=": "/>
                <p:inputText value="#{fstmtBean.unsaveData.fstmtName}" id="fstateName" required="false" >
                    <p:ajax event="change" partialSubmit="false"/>
                </p:inputText>
                <p:spacer width="5" />
                <p:outputLabel value="Format Laporan" for="fstateFormat" /><h:outputLabel value=": " />
                <p:selectOneMenu value="#{fstmtBean.unsaveData.format}" style="width:200px;" id="fstateFormat" required="false">
                    <f:selectItem itemLabel="#{bundle.Select} Format Laporan" />
                    <f:selectItems value="#{fstmtBean.avblFormat}" />
                    <p:ajax event="change" />
                </p:selectOneMenu>
            </h:panelGrid>
                        
            <h:panelGrid cellpadding="5" cellspacing="2"> </h:panelGrid>
            
            
<!--            <h:panelGrid cellpadding="2" cellspacing="2"> </h:panelGrid>-->
            <p:toolbar>
                <p:toolbarGroup align="left" style="padding: 2px 2px 0 5px;" >
                    <h:outputText value="Susunan Baris Laporan Keuangan" />
                </p:toolbarGroup>
                <p:toolbarGroup align="right">
                    <p:commandButton title="New line" icon="ui-icon-document" style="width: 18px; height: 18px;" iconPos="center"
                                     update="dtLines"  action="#{fstmtBean.addLine()}">
                        <pe:resetEditableValues for="apLinesGL"/>  
                        <pe:resetEditableValues for="dtLinesTotals"/>  
                    </p:commandButton> 
                    
                    <p:commandButton title="Insert new line" icon="ui-icon-arrowthickstop-1-s" style="width: 18px; height: 18px;" iconPos="center"
                                     update="dtLines"  action="#{fstmtBean.inserLine()}">
                        <pe:resetEditableValues for="dtLinesGL"/>  
                        <pe:resetEditableValues for="dtLinesTotals"/>  
                    </p:commandButton> 
                    
                    <p:commandButton title="Finance Statement template" icon="ui-icon-gear" style="width: 18px; height: 18px;" 
                                     iconPos="center" process="@this" type="button" id="fstemplate" />
                    <p:menu overlay="true" trigger="fstemplate" my="right top" at="right bottom">  
                        <p:submenu label="Template laporan">  
                            <p:menuitem value="Laba Rugi" actionListener="#{fstmtBean.createReport(false)}" update="dtLines, fstateName, fstateFormat" />  
                            <p:menuitem value="Neraca" actionListener="#{fstmtBean.createReport(true)}" update="dtLines, fstateName, fstateFormat" />  
                        </p:submenu>  
                    </p:menu>  
                    
                </p:toolbarGroup>
                <p:toolbarGroup align="right">
                    <p:commandButton id="doNothingFs1" type="button" value="" style="width: 0px; height: 0px;"/> 
                    <p:defaultCommand target="doNothingFs1"/> 
                </p:toolbarGroup>
            </p:toolbar>
            
            <p:outputPanel autoUpdate="#{fstmtBean.updatePanel}" >
            <p:dataTable id="dtLines" value="#{fstmtBean.unsaveData.fstmtlines}" var="line" rowStyleClass="#{fstmtBean.rowClass(line.lineType)}" 
                           editable="true" selection="#{fstmtBean.fstmtline}" rowKey="#{line.id}" selectionMode="single" 
                           scrollable="true" scrollHeight="400">
                <p:ajax event="rowEdit" listener="#{fstmtBean.rowEditedLine}" />
                <p:ajax event="rowSelect" listener="#{fstmtBean.onLineSelect}" update=":#{utilityBean.findClientId('dtLinesGL')} :#{utilityBean.findClientId('dtLinesTotals')}" />

                <p:column width="350" headerText="Deskripsi">
                    <p:cellEditor>  
                        <f:facet name="output">
                            
                            <p:spacer width="20" rendered="#{line.lineType == 'D' or line.lineType == 'L'}"/>
                            <p:spacer width="10" rendered="#{rpt.lineType == 'T'}"/>
                            <h:outputText value="#{line.lineDescription}"/>
                        </f:facet>
                        <f:facet name="input">
                            <h:inputText value="#{line.lineDescription}" style="width: 350px;"/>
                        </f:facet>
                    </p:cellEditor>
                </p:column>
                
                <p:column width="100" headerText="Jenis Baris">
                    <p:cellEditor>  
                        <f:facet name="output">
                            <h:outputText value="#{fstmtBean.selectItemValueOf(fstmtBean.avblType, line.lineType)}" />
                        </f:facet>
                        <f:facet name="input">
                            <p:selectOneMenu value="#{line.lineType}" style="width:100%" >
                                <f:selectItems value="#{fstmtBean.avblType}" />
                            </p:selectOneMenu>  
                        </f:facet>
                    </p:cellEditor>
                </p:column>
                
                <p:column width="20" headerText="R">
                    <p:cellEditor>  
                        <f:facet name="output"><p:selectBooleanCheckbox value="#{line.reverseValue}" style="text-align: center" disabled="true"/></f:facet>
                        <f:facet name="input"><p:selectBooleanCheckbox value="#{line.reverseValue}" style="text-align: center" /></f:facet>
                    </p:cellEditor>
                </p:column>
                
                <p:column headerText="Actions" width="60" >  
                    <p:rowEditor /><p:spacer width="2"/>
                    
                    <p:commandLink title="Remove" disabled="#{line.lineType==null}" process="@this"
                                   action="#{fstmtBean.handleRemoveLine(line.id.seq)}" >
                        <p:graphicImage url="./resources/images/ui-icon-delete.png" />
                    </p:commandLink>
                </p:column>  
            </p:dataTable>
            </p:outputPanel>    
        </p:panel>
        
        <p:panel>
            <p:toolbar>
                <p:toolbarGroup align="left" style="padding: 2px 2px 0 5px;" >
                    <h:outputText value="#{bundle.glaccnt} :" />
                </p:toolbarGroup>
                <p:toolbarGroup align="right">
                    <p:commandButton title="#{bundle.btnNew}" icon="ui-icon-document" style="width: 18px; height: 18px;" iconPos="center"
                                                 update="dtLinesGL"  action="#{fstmtBean.addLineGL()}"/> 
                </p:toolbarGroup>
            </p:toolbar>
                        
            <p:outputPanel autoUpdate="#{fstmtBean.updatePanel}" >
                <p:dataTable id="dtLinesGL" value="#{fstmtBean.fstmtline.fstmtaccs}" var="gl" editable="true" rendered="#{fstmtBean.fstmtline.fstmtaccs != null}" 
                             scrollable="true" scrollRows="10" scrollHeight="200">
                    <p:ajax event="rowEdit" listener="#{fstmtBean.rowEditedGL}" />

                    <p:column width="100" headerText="Dari No">
                        <p:cellEditor>  
                            <f:facet name="output"><h:outputLabel value="#{gl.accountNoFrom}" /></f:facet>
                            
                            <f:facet name="input" >
                                <p:autoComplete value="#{fstmtBean.glfrom}" style="width:100%" completeMethod="#{fstmtBean.completeGL}" 
                                                var="acc" itemLabel="#{acc.accountNo}" itemValue="#{acc}" converter="glaccnt" forceSelection="false" 
                                                maxResults="50" minQueryLength="3" dropdown="false" size="50" > 
                                    <p:column width="50" >#{acc.accountNo}</p:column>  
                                    <p:column width="200">#{acc.accountName}</p:column>  
                                </p:autoComplete>  
                            </f:facet>
                        </p:cellEditor>
                    </p:column>

                    <p:column width="100" headerText="Dari No">    
                        <p:cellEditor >  
                            <f:facet name="output"><h:outputLabel value="#{gl.accountNoTo}" /></f:facet>
                            
                            <f:facet name="input" rendered="#{fstmtBean.glto != null}">
                                <p:autoComplete value="#{fstmtBean.glto}" style="width:100%" completeMethod="#{fstmtBean.completeGL}" 
                                    var="acc" itemLabel="#{acc.accountNo}" itemValue="#{acc}" converter="glaccnt" forceSelection="true"
                                    maxResults="50" minQueryLength="3" dropdown="false" size="50">
                                    <p:column width="50" >#{acc.accountNo}</p:column>  
                                    <p:column width="200">#{acc.accountName}</p:column>  
                                </p:autoComplete>
                            </f:facet>
                        </p:cellEditor>
                    </p:column>

                    <p:column headerText="Actions" style="width:80px" >  
                        <p:rowEditor /><p:spacer width="2"/>
                        <p:commandLink title="Remove" action="#{fstmtBean.handleRemoveGL(gl.id.seq)}" process="@this">
                            <p:graphicImage url="./resources/images/ui-icon-delete.png" />
                        </p:commandLink>
                    </p:column>  

                </p:dataTable>
            </p:outputPanel>
            
            <h:panelGrid cellpadding="10" cellspacing="10"> </h:panelGrid>
            <p:toolbar>
                <p:toolbarGroup align="left" style="padding: 2px 2px 0 5px;" >
                    <h:outputText value="Totals :" />
                </p:toolbarGroup>
                
                <p:toolbarGroup align="right">
                    <p:commandButton title="#{bundle.btnNew}" icon="ui-icon-document" style="width: 18px; height: 18px;" iconPos="center"
                                                 update="dtLinesTotals"  action="#{fstmtBean.addLineTotal()}"/> 
                </p:toolbarGroup>
            </p:toolbar>
            
            <p:outputPanel autoUpdate="#{fstmtBean.updatePanel}" >
                <p:dataTable id="dtLinesTotals" value="#{fstmtBean.fstmtline.fstmttots}" var="tot" editable="true" >
                    <p:column width="250" headerText="Total">
                        <p:cellEditor>  
                            <f:facet name="output">
                                <h:outputText value="#{fstmtBean.selectItemValueOf(fstmtBean.avblTotals, tot.fstmtIdSeq)}" />
                            </f:facet>  
                            <f:facet name="input">
                                <p:selectOneMenu value="#{tot.fstmtIdSeq}" style="width:250px;" >
                                    <f:selectItems value="#{fstmtBean.avblTotals}" />
                                </p:selectOneMenu>  
                            </f:facet>
                        </p:cellEditor>
                    </p:column>

                    <p:column headerText="Actions" style="width:70px" >  
                        <p:rowEditor /><p:spacer width="2"/>
                        <p:commandLink title="Remove" action="#{fstmtBean.handleRemoveTotal(tot.id.seq)}" process="@this">
                            <p:graphicImage url="./resources/images/ui-icon-delete.png" />
                        </p:commandLink>
                    </p:column>  

                </p:dataTable>
            </p:outputPanel>
        </p:panel>
    </h:panelGrid>        
</ui:composition>


